<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<html>

<head>

    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
	<meta name="_csrf" content="${_csrf.token}"/>
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    
    <title>HappyHome Admin</title>

    <!-- Bootstrap Core CSS -->
    <link href="<c:url value="/resources/admin/css/bootstrap.min.css"/>" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link href="<c:url value="/resources/admin/css/sb-admin.css"/>" rel="stylesheet"/>

    <!-- Custom Fonts -->
    <link href="<c:url value="/resources/admin/font-awesome-4.1.0/css/font-awesome.min.css"/>" rel="stylesheet" type="text/css"/>

	<!-- datepicker plugin, css -->
    <link href="<c:url value="/resources/datepicker/bootstrap.css"/>" rel="stylesheet"/>
    <link href="<c:url value="/resources/datepicker/datepicker.css"/>" rel="stylesheet"/>
    <!-- /datepicker plugin, css -->
    
    <!-- ckeditor plugin -->
    <script src="<c:url value="/resources/ckeditor/ckeditor.js"/>" type="text/javascript"></script>
    <!-- end ckeditor -->
    
    <!-- currency plugin-->
    <!-- jQuery Version 1.11.0 -->
    <script src="<c:url value="/resources/admin/js/jquery-1.11.0.js"/>"></script>
    <script src="<c:url value="/resources/currency/jquery.number.js"/>"></script>
    <script type="text/javascript">
			$(function(){
				// Set up the number formatting.
				$('#priceRental').number( true, 0 );
				$('#priceDeposit').number( true, 0 );
			});
			
			/* function back to list */
			function backToList(){
				document.location.href = "${pageContext.request.contextPath}/admin/rooms/list";
			}
		</script>
    <!-- /currency plugin-->
    
    <!-- script district -->
    <script>
    $(document).ready(function(){
    	/* global variable for house */
    	roomId = -1;
   	  	/* form submit value */
   	 	$('#newRoomForm').submit(function( event ) {
			event.preventDefault(); 
	   		for ( instance in CKEDITOR.instances ){
		        CKEDITOR.instances[instance].updateElement();
		    }
	   		var form = new FormData(document.getElementById('newRoomForm'));
	   		
	   		$.ajax({
	   			url: "${pageContext.request.contextPath}/admin/rooms/newRoomSubmit",
	   			type:"POST",
	   			data: form,
	   			dataType: 'text',
	   		    processData: false,
	   		    contentType: false,
		   		beforeSend: function (xhr){ 
		   	        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content")); 
		   	    },
	   			success: function (response) {
	   				var result = response.split(";");
	   				roomId = result[0];
	   				document.getElementById("modal-body-notifycation").innerHTML = '<i class="icon-ok-sign modal-icon"></i> Create \"' + result[1] + '\" successfull!';
	   				$("#myModal").modal('show'); 
	    		},
	   			error: function(jqXHR, textStatus, errorThrown){
	   				alert(textStatus);
	   			}
	   		});
	   		event.unbind();
		});
   	  	
   	  	/* hide modal to redirect to upload images */
   	 	$('#myModal').on('hidden.bs.modal', function (e) {
	   		e.preventDefault(); /* STOP default action */
	   		document.location.href = "${pageContext.request.contextPath}/admin/rooms/uploadImages?roomId="+ roomId; 
	   	});
	});
    </script>
    <!-- / script district -->
</head>

<body>
	<c:url value="/j_spring_security_logout" var="logoutUrl" />
	<form action="${logoutUrl}" method="post" id="logoutForm" style="display:none;">
		<input type="hidden" name="${_csrf.parameterName}"
			value="${_csrf.token}" />
	</form>
    <script>
		function formSubmit() {
			document.getElementById("logoutForm").submit();
		}
	</script>
	
    <div id="wrapper">

        <!-- Navigation -->
        <%@ include file="/WEB-INF/pages/admin/navigation.jsp" %>

        <div id="page-wrapper">

            <div class="container-fluid">

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            NEW ROOM
                        </h1>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-dashboard"></i> Dashboard
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-money fa-fw"></i> NEW ROOM</h3>
                            </div><!-- panel-heading -->
                            <div class="panel-body">
                            	<div class="row">
                            		<form role="form" id="newRoomForm" method="post" enctype="multipart/form-data">
					                    <div class="col-lg-6">
					                            <div class="form-group">
					                                <label>Room Code</label>
					                                <input class="form-control" placeholder="Please, Enter value!" name="codeRoom"/>
					                            </div>
					
					                            <div class="form-group">
					                                <label>Room Name</label>
					                                <input class="form-control" placeholder="Please, Enter value!" name="nameRoom"/>
					                            </div>
					
					                            <div class="form-group">
					                                <label>Persons</label>
					                                <select class="form-control" name="numberMaxPerson">
					                                    <c:forEach var="i" begin="1" end="10">
														   <option value="${i}">${i}</option>
														</c:forEach>
					                                </select>
					                            </div>
									
												<div class="form-group">
					                                <label>Sqft</label>
					                                <div class="form-group input-group">								
					                                <input type="text" class="form-control"
					                                placeholder="Please, Enter value!"
					                                	onkeypress='return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 8' name="sqft"/>
					                                <span class="input-group-addon">m<sup>2</sup></span>
					                            	</div>
					                            </div>
					                    </div><!-- /col-lg-6 -->
					                    <div class="col-lg-6">
					                            <div class="form-group">
					                                <label>House</label>
					                                <select class="form-control" id="dropDownListHouse" name="house">
					                                	<c:if test="${not empty houses}">
							                                <c:forEach var="house" items="${houses}">
																<option value=${house.codeHouse }>${house.nameHouse}</option>
															</c:forEach>
														</c:if>
					                                </select>
					                            </div>
					
					                            <div class="form-group">
					                            	<label>Floor</label>	
					                                <input type="text" class="form-control" name="floor"
					                                placeholder="Please, Enter value!"
					                                	onkeypress='return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 8' name="sqft"/>
					                            </div>
					
					                            <div class="form-group">
					                            	<label>Rental Price</label>
					                                <input type="text" class="form-control" id="priceRental" placeholder="0,000" name="priceRoom"/>
					                            </div>
					
					                            <div class="form-group">
					                            	<label>Deposit Price</label>
					                                <input type="text" class="form-control" id="priceDeposit" placeholder="0,000" name="depositRoom"/>
					                            </div>
					                      </div>	<!-- /col-lg-6 -->
                        				<div class="col-lg-12">
	                        				<div class="panel panel-default">
					                            <div class="panel-heading">
					                                <h3 class="panel-title"><i class="fa fa-money fa-fw"></i> Utilities</h3>
					                            </div><!-- panel-heading -->
					                            <div class="panel-body">
					                            	<c:if test="${not empty utilities }">
														<c:forEach var="utility" items="${utilities }">
															<div class="col-md-4 col-sm-4 col-xs-12">
																<div class="checkbox">
								                                    <label>
								                                        <input type="checkbox" name="${utility.codeUtility }" value="true" autocomplete="off"/> ${utility.nameUtility }</input>
								                                    </label>
							                                	</div>
															</div>
														</c:forEach>
													</c:if>
					                            </div><!-- /panel-body -->
								            </div>  <!-- panel panel-default -->
							           	</div>   <!-- /col-lg-12 -->  
							           	<div class="col-lg-12">
							           		<div class="panel panel-default">
							           			<div class="panel-heading">
							           				<h3 class="panel-title">Description</h3>
							           			</div>
							           			<div class="panel-body">
							           				<textarea name="description" id="description" class="col-lg-12">
										            </textarea>
										            <script>
										                CKEDITOR.replace( 'description' );
										            </script>
							           			</div>
							           		</div>
							           	</div>
							           	<div class="col-lg-12">         
	                        				<button type="submit" class="btn btn-default">
												<span class="glyphicon glyphicon-floppy-save"></span>
												<spring:message code="message.SaveButton" text="default text" />
											</button>
				                            <button type="reset" class="btn btn-default">
				                            	<span class="glyphicon glyphicon-repeat"></span>
				                            	<spring:message code="message.ResetButton" text="default text" />
											</button>
				                            <button type="button" class="btn btn-default" onclick="backToList()">
				                            	<span class="glyphicon glyphicon-off"></span> 
				                            	<spring:message code="message.ExitButton" text="default text" />
				                            </button>
				                        </div><!-- /col-lg-12 --> 
                        			</form>
                    			</div><!-- /row -->
                			</div><!-- /panel-body -->
                         </div><!-- panel panel-default -->
                     </div><!-- col-lg-12 -->
                </div><!-- /row -->
            </div><!-- /container-fluid -->

          </div><!-- /page-wrapper -->

        </div><!-- /#wrapper -->
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        <h4 class="modal-title" id="myModalLabel">
		        	<spring:message code="message.FormNotification" text="notification"/>
		        </h4>
		      </div>
		      <div class="modal-body">
		        	<p class="error-text" id="modal-body-notifycation"/>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-primary" data-dismiss="modal">
		        	<spring:message code="message.closeButton" text="close"/>
		        </button>
		      </div>
		    </div>
		  </div>
		</div>
		<!-- /modal -->
    <!-- Bootstrap Core JavaScript -->
    <script src="<c:url value="/resources/admin/js/bootstrap.min.js"/>"></script>

    <!-- datepicker plugin -->
    <script src="<c:url value="/resources/datepicker/bootstrap-datepicker.js"/>"></script>
	<script> 
		/* set check-out date >= check-in date */
		$('#dpd1').datepicker('setValue', new Date());
		
		var nowTemp = new Date();
		var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
		 
		var checkin = $('#dpd1').datepicker({
		  onRender: function(date) {
		    return date.valueOf() < now.valueOf() ? 'disabled' : '';
		  }
		}).on('changeDate', function(ev) {
		  if (ev.date.valueOf() > checkout.date.valueOf()) {
		    var newDate = new Date(ev.date);
		    newDate.setDate(newDate.getDate() + 1);
		    checkout.setValue(newDate);
		  }
		  checkin.hide();
		  $('#dpd2')[0].focus();
		}).data('datepicker');
		var checkout = $('#dpd2').datepicker({
		  onRender: function(date) {
		    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
		  }
		}).on('changeDate', function(ev) {
		  checkout.hide();
		}).data('datepicker');
	</script>
	<!-- /datepicker plugin-->
</body>

</html>
